<template>
  <el-dialog v-model="visible" title="系统功能文档编写"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="55%">
    <el-form ref="formRef" :model="dynamicForm" class="demo-dynamic" label-width="80px">
      <el-form-item label="序号标记" prop="startIndexMarker" :rules="{
                required: true,
                message: '序号标记不能为空',
                trigger: 'blur',
            }">
        <el-input style="width: 250px;" v-model="dynamicForm.startIndexMarker"/>
      </el-form-item>
      <template v-for="(item, index) in dynamicForm.data" :key="index">
        <div class="item_box" :style="{ borderTop: index > 0 ? '1px dashed #ccc' : '' }">
          <div class="delete-btn">
            <el-button type="danger"  icon="Close" @click="del(index)"></el-button>
          </div>
          <div>{{ index + 1 }} 、</div>
          <el-form-item label="标题" :prop="'data.' + index + '.title'">
            <el-input style="width: 250px;" v-model="item.title"/>
          </el-form-item>
          <el-form-item label="描述" :prop="'data.' + index + '.desc'" :rules="{
                        required: true,
                        message: '描述不能为空',
                        trigger: 'blur',
                    }">
            <el-input type="textarea" :rows="3" v-model="item.desc" :autosize="{ minRows: 5 }"/>
          </el-form-item>
          <div class="image-box">
            <div class="box" v-for="(img, i_index) in item.imageInfos" :key="index">
              <el-form-item label="图片" :prop="`data[${index}].imageInfos[${i_index}].url`" :rules="{
                            required: true,
                            message: '文件图片不能为空',
                            trigger: 'blur',
                        }">
                <ImageUpload :is-show-tip="false" v-model="img.url" :limit="1" :fileSize="20"
                             @success="(res) => handleImageSuccess(index,i_index, res)"/>
              </el-form-item>
              <el-form-item label="图片名称" :prop="`data[${index}].imageInfos[${i_index}].name`" :rules="{
                            required: true,
                            message: '图片名称不能为空',
                            trigger: 'blur',
                        }">
                <el-input style="width: 150px;" v-model="img.name"/>
              </el-form-item>
              <div class="photo_delete_btn">
                <el-button type="danger"  size="small" icon="Delete"
                           @click="item.imageInfos.splice(i_index, 1)"></el-button>
              </div>
            </div>
          </div>
          <div class="photo_add-btn">
            <el-button type="success" icon="Plus" @click="item.imageInfos.push({})">新增图片</el-button>
          </div>
        </div>
      </template>
      <el-divider>
        <el-button type="primary" icon="Plus" @click="add">添加</el-button>
      </el-divider>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {generateOperateDoc} from "@/api/tool/db-doc";
import {saveAs} from 'file-saver'
import {getCurrentInstance, ref} from "vue";

const visible = ref(false);
const {proxy} = getCurrentInstance();
const dynamicForm = ref({
  startIndexMarker: null,
  data: [
    {
      desc: "",
      imageInfos: [
        {
          url: undefined,
          name: undefined
        },
      ]
    },
  ],
});

const open = async (value) => {
  visible.value = value;
  proxy.resetForm("formRef");

};

const close = () => {
  visible.value = false;
};

const confirm = async () => {
  proxy.$refs.formRef.validate(async (valid) => {
    if (valid) {
      const res = await generateOperateDoc(dynamicForm.value)
      saveAs(res, `系统功能文档${new Date().getTime()}.docx`)
    } else {
      proxy.$message.error("请填写完整");
    }
  });
};

const del = (index) => {
  if (dynamicForm.value.data.length === 1) {
    proxy.$message.error("至少保留一个");
    return;
  }
  dynamicForm.value.data.splice(index, 1);
};

const add = () => {
  dynamicForm.value.data.push({
    desc: "",
    file: undefined,
    imageInfos: [
      {
        url: undefined,
        name: undefined
      },
    ]
  });
};

const handleImageSuccess = (async (index,i_index, res) => {
  dynamicForm.value.data[index].imageInfos[i_index].name = handleFileName(res.fileName)
});

const handleFileName = (name => {
  if (name) {
    let newName = name.substr(0, name.lastIndexOf("."))
    return newName.replace('界面图', '') + '界面图'
  }
  return ''
})
defineExpose({open, close});
</script>

<style scoped lang="scss">
.delete-btn{
  text-align: right;
  margin-top: 15px;
}
.item_box {
  padding-bottom: 30px;
  margin: 0 15px;
  .photo_add-btn {
    text-align: right;
  }

  .image-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;

    .box {
      display: flex;
      flex-direction: column;
      align-items: start;
      position: relative;

      .photo_delete_btn {
        position: absolute;
        right: 0; //起始是在body中，横向距左50%的位置
        top: 95%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
      }
    }
  }
}
</style>
